<template>
    <!-- 绑定样式属性值 -->
    <div v-bind:style="{'background-color': pink, width: innerwidth, height: height + 'px'}">
        <!-- 三元表达式 -->
        <div v-bind:style="{backgroundColor: isBlue ? blue : 'black', width: '50px', height: '20px'}"></div>
        <!-- 绑定样式对象 -->
        <div v-bing="myDiv"></div>
    </div>
    
</template>

<script setup>
    import {ref, reacitve} from 'vue'
    const isBlue = ref(false)
    const blue = ref('blue')
    const pink = ref('pink')
    const width = ref('100%')
    const height = ref(40)
    const myDiv = reacitve({
        backgroundColor: 'red',
        width: '50px',
        height: '20px'
    })
</script>